<template>
  <div>
    <svg ref="svg" width="800" height="600"></svg>
  </div>
</template>

<script>
import { SVG } from "@svgdotjs/svg.js";
export default {
  name: "ceshi",
  data() {
    return {
      answer: '', // 答案
    };
  },
  mounted() {
    this.svg = SVG(this.$refs.svg); // 获取svg元素和SVG实例
    const options = ['A', 'B', 'C', 'D']; // 选项
    const rows = 5; // 行数
    const cols = 4; // 列数
    const startX = 50; // 起始X坐标
    const startY = 50; // 起始Y坐标
    const width = 60; // 每个选项框的宽度
    const height = 40; // 每个选项框的高度
    const gap = 20; // 每个选项框之间的间隔
    for (let i = 0; i < cols; i++) { // 每列
      for (let j = 0; j < rows; j++) { // 每行
        const x = startX + i * (width + gap); // 计算X坐标
        const y = startY + j * (height + gap); // 计算Y坐标
        const option = options[i]; // 当前选项
        const isSelected = this.answer === option; // 是否被选中
        const rect = this.svg.rect(x, y, width, height) // 绘制矩形
          .attr({ fill: '#fff', stroke: '#000', 'stroke-width': 2 })
          .data('option', option); // 将当前选项存储到矩形的data中
        if (isSelected) { // 如果当前选项被选中，则设置背景色为绿色
          rect.attr({ fill: 'green' });
        }
        const text = this.svg.text(x + width / 2, y + height / 2, option) // 绘制文字
          .attr({ 'text-anchor': 'middle', 'alignment-baseline': 'central' });
        rect.click(() => { // 点击矩形时
          this.answer = option; // 设置答案
          this.clearSelectedRect(); // 清除已选中的矩形
          rect.attr({ fill: 'green' }); // 把当前矩形设置为选中状态
        });
      }
    }
  },
  methods: {
    clearSelectedRect() { // 清除已选中的矩形
      const rects = this.svg.find('rect'); // 获取所有矩形
      rects.forEach((rect) => { // 遍历所有矩形
        const option = rect.data('option'); // 获取当前矩形对应的选项
        if (this.answer !== option) { // 如果当前选项未被选中，则将矩形背景色重置为白色
          rect.attr({ fill: '#fff' });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>